<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">动火作业</view>
			<view class="right">政策法规</view>
		</view>
		<view id="body">
			<!--基础-->
			<view class="card">
				<view class="title">
					<view class="name">基础信息</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业编号：<text class="require">*</text></view>
					<view class="input flex-row">
						<input v-model="form.job_num" placeholder="输入作业编号"/>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始日期：<text class="require">*</text></view>
					<view class="input flex-row">
						<picker @change="changeStartDate" :value="startDate" mode="date">
							<view class="value">{{ startDate }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始时间：<text class="require">*</text></view>
					<view class="input flex-row">
						<picker @change="changeStartTime" :value="startTime" mode="time">
							<view class="value">{{ startTime }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束日期：<text class="require">*</text></view>
					<view class="input flex-row">
						<picker @change="changeOverDate" :value="overDate" mode="date">
							<view class="value">{{ overDate }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束时间：<text class="require">*</text></view>
					<view class="input flex-row">
						<picker @change="changeOverTime" :value="overTime" mode="time">
							<view class="value">{{ overTime }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">审批时长：</view>
					<view class="input flex-row">
						<picker @change="changeTimes" :value="timeIndex" :range="times">
							<view class="value">{{ timesText }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<text class="require">*</text></view>
					<view class="input flex-row">
						<picker @change="changeLevel" :value="levelIndex" :range="levels">
							<view class="value">{{ form.level }}</view>
						</picker>
						<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业地点：<text class="require">*</text></view>
					<view class="input flex-row">
						<input v-model="form.place" placeholder="输入作业地点"/>
					</view>
				</view>
				<view class="item flex-row">
					<view class="label">动火方式：<text class="require">*</text></view>
					<view class="input flex-row">
						<input v-model="others.type" placeholder="输入动火方式"/>
					</view>
				</view>
				<view class="item flex-row" style="align-items: flex-start;">
					<view class="label">作业内容：<text class="require">*</text></view>
					<textarea v-model="form.job_detail" placeholder="输入作业内容" />
				</view>
			</view>
			<!--负责人-->
			<view class="card">
				<!--作业人-->
				<view class="title">
					<view class="name">作业人信息<text class="require">*</text></view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in work_man_info" :key="index" class="people">
						<view class="flex-row">
							<view>姓名：{{ item.cert_man }}</view>
							<view>工作：{{ item.job_class }}</view>
						</view>
						<view>证件号：{{ item.num }}</view>
						<uni-icons @click="delWorkMember(item.id)" type="clear" size="20" class="pos"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view @click="addJobMember" class="oper">+增加作业人</view>
				</view>
				<!--审批人-->
				<view class="title">
					<view class="name">审批人信息（勾选为巡检人）<text class="require">*</text></view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in shenpi_users" :key="index" class="people flex-row">
						<view @click="selectCheckMember(item.id)" class="flex-row" style="width: calc(100% - 80upx);justify-content: space-between;">
							<text>审批人{{ index+1 }}：{{ item.name }}</text>
							<uni-icons v-if="item.checked" type="checkbox" size="20" color="#007aff" class="select"></uni-icons>
							<uni-icons v-else type="circle" size="20" color="#fff" class="select"></uni-icons>
						</view>
						<uni-icons @click="delCheckMember(item.id)" type="clear" size="20"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view @click="selectMember('check')" class="oper">+增加审批人</view>
				</view>
				<!--监督人-->
				<view class="title">
					<view class="name">监督人信息<text class="require">*</text></view>
				</view>
				<view class="people-card">
					<view @click="selectMember('super')" class="people flex-row">
						<view>{{ superMembers[0] ? superMembers[0].name : '选择监督确认人' }}</view>
						<uni-icons type="arrowright" size="18"></uni-icons>
					</view>
				</view>
			</view>
			<!--申请人-->
			<view class="card">
				<view class="title">
					<view class="name">申请人签字<text class="require">*</text></view>
				</view>
				<view v-if="form.apply_sign" class="sign-image">
					<image :src="form.apply_sign"></image>
				</view>
				<view v-else class="btns" style="padding-left: 170upx;">
					<view @click="showSign" class="btn">点击签字</view>
				</view>
			</view>
			<view class="btns">
				<view @click="submit" class="btn">提交作业票</view>
			</view>
		</view>
		<!--作业人弹窗-->
		<uni-popup ref="job" type="center">
			<view id="popup">
				<view class="popup-head">添加作业人</view>
				<view class="popup-body">
					<view class="card">
						<view class="title">
							<view class="name">输入姓名<text class="require">*</text></view>
						</view>
						<textarea v-model="work.cert_man" placeholder="输入姓名..." />
						<view class="title">
							<view class="name">输入工种<text class="require">*</text></view>
						</view>
						<textarea v-model="work.job_class" placeholder="输入工种..." />
						<view class="title">
							<view class="name">输入证件号<text class="require">*</text></view>
						</view>
						<textarea v-model="work.num" placeholder="输入证件号..." />
					</view>
					<view @click="selectMember('work')" class="system">
						<text>从系统选择</text>
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</view>
				<view class="popup-foot">
					<view @click="cancelSelect">取消</view>
					<view @click="confirmSelect">确认</view>
				</view>
			</view>
		</uni-popup>
		<!--签名弹出-->
		<uni-popup ref="popup" type="bottom" @change="toggleSign">
			<view class="popup-outter">
				<view class="popup-inner">
					<view class="popup-title">
						<text>签名</text>
						<view @click="clearClick" class="flex-row">
							<image src="../../../static/img/grid/clear.png" mode=""></image>
							<text>清除</text>
						</view>
					</view>
					<canvas
						canvas-id="firstCanvas" 
						disable-scroll='true' 
						@touchmove='move' 
						@touchstart='start($event)' 
						@touchend='end' 
						@touchcancel='cancel' 
						@longtap='tap' 
						@error='error'>
					</canvas>
					<view class="btns flex-row">
						<view @click="hideSign">返回看看</view>
						<view @click="overSign">签名</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { date, isNull, createRandomCode } from '@/common/function.js';

var content = null;
var touchs = [];
var _that;

export default{
	components: { uniIcons,uniPopup },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			isShowSign: false,
			times: [2,4,6,8,10,14,18,24],
			timeIndex: 0,
			levels: ['特级作业','一级作业','二级作业'],
			levelIndex: 0,
			timesText: '预计2小时',
			startDate: '',
			overDate: '',
			startTime: '',
			overTime: '',
			others: {
				type: '',
			},
			work: {	// 手动添加作业人员
				id: '',
				cert_man: '',
				job_class: '',
				num: ''
			},
			superMembers: [],	// 监督人
			work_man_info: [],
			shenpi_users: [],
			check_content: {},
			form: {
				type: '动火作业',
				job_num: new Date().getTime(),
				start_time: '',
				over_time: '',
				shenpi_hours: 2,
				level: '特级作业',
				place: '',
				dangers: '',
				others: '',
				job_detail: '',
				work_man_info: [],
				shenpi_users: [],
				xunjian_man: '',
				apply_man: '',
				apply_sign: '',
				jiandu_man: '',
				check_content: {}
			}
		}
	},
	onLoad(){
		_that = this
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
		
		// 处理时间
		this.doDateTime();
		
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
	},
	onShow(){
		this.work_man_info = uni.getStorageSync('jobTicketWorkCheckedList') || [];
		this.shenpi_users = uni.getStorageSync('jobTicketCheckCheckedList') || [];
		this.superMembers = uni.getStorageSync('jobTicketSuperCheckedList') || [];
		this.form.jiandu_man = this.superMembers.length ? this.superMembers[0].id : '';
	},
	onBackPress(){
		// 处理签名弹窗问题
		if(this.isShowSign){
			this.hideSign();
			return true;
		}
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 处理日期
		doDateTime(){
			let { year, month, day, hours, minutes } = date();
			this.startDate = `${year}-${month}-${day}`;
			this.overDate = `${year}-${month}-${day}`;
			
			// 处理分钟
			let intHours = Number.parseInt(hours);
			if(minutes == '00'){
				this.startTime = `${hours}:00`;
				this.overTime = intHours < 23 ? `${intHours+1 < 10 ? '0'+(intHours+1) : intHours+1}:00` : '00:00';
			}else{
				this.startTime = intHours < 23 ? `${intHours+1 < 10 ? '0'+(intHours+1) : intHours+1}:00` : '00:00';
				this.overTime = intHours < 23 ? `${intHours+2 < 10 ? '0'+(intHours+2) : intHours+2}:00` : '01:00';
				if(this.overTime == '24:00') this.overTime = '00:00';
			}
			this.startTime = this.startTime;
			this.overTime = this.overTime;
		},
		// 切换开始日期
		changeStartDate(e){
			this.startDate = e.detail.value;
		},
		// 切换结束日期
		changeOverDate(e){
			this.overDate = e.detail.value;
		},
		// 切换开始时间
		changeStartTime(e){
			this.startTime = e.detail.value;
		},
		// 切换结束时间
		changeOverTime(e){
			this.overTime = e.detail.value;
		},
		// 切换审批时长
		changeTimes(e){
			this.timesText = `预计${this.times[e.detail.value]}小时`;
			this.form.shenpi_hours = this.times[e.detail.value];
		},
		// 切换作业等级
		changeLevel(e){
			this.levelIndex = e.detail.value;
			this.form.level = this.levels[this.levelIndex];
		},
		// 选择人员
		selectMember(type){
			if(type == 'work'){
				this.$refs.job.close();
				uni.navigateTo({url: '../memberWork'});
			}
			if(type == 'check') uni.navigateTo({url: '../memberCheck'});
			if(type == 'super') uni.navigateTo({url: '../memberSuper'});
		},
		// 取消选择人员
		cancelSelect(){
			this.$refs.job.close();
		},
		// 确认选择人员
		confirmSelect(){
			// 数据校验
			if(isNull(this.work.cert_man)){
				return uni.showToast({icon: 'none', title: '请输入作业人姓名'});
			}
			if(isNull(this.work.job_class)){
				return uni.showToast({icon: 'none', title: '请输入作业人工种'});
			}
			if(isNull(this.work.num)){
				return uni.showToast({icon: 'none', title: '请输入作业人证件号'});
			}
			this.work.id = createRandomCode();
			this.work_man_info.push(JSON.parse(JSON.stringify(this.work)));
			
			let jobTicketWorkCheckedIds = uni.getStorageSync('jobTicketWorkCheckedIds') || [];
			jobTicketWorkCheckedIds.push(this.work.id);
			uni.setStorageSync('jobTicketWorkCheckedIds', jobTicketWorkCheckedIds)
			uni.setStorageSync('jobTicketWorkCheckedList', this.work_man_info);
			
			// 重置数据
			this.work.id = '';
			this.work.cert_man = '';
			this.work.job_class = '';
			this.work.num = '';
			this.$refs.job.close();
		},
		// 删除作业人员
		delWorkMember(id){
			let jobTicketWorkCheckedIds = uni.getStorageSync('jobTicketWorkCheckedIds') || [];
			jobTicketWorkCheckedIds = jobTicketWorkCheckedIds.filter(item=>item != id);
			this.work_man_info = this.work_man_info.filter(item=>item.id != id);
			uni.setStorageSync('jobTicketWorkCheckedIds', jobTicketWorkCheckedIds);
			uni.setStorageSync('jobTicketWorkCheckedList', this.work_man_info);
		},
		// 增加作业人
		addJobMember(){
			this.$refs.job.open();
		},
		// 切换审批人为巡检人
		selectCheckMember(id){
			let checkedMembers = JSON.parse(JSON.stringify(this.shenpi_users));
			this.shenpi_users = checkedMembers.map(item=>{
				item.checked = item.id == id ? true : false;
				return item;
			});
			uni.setStorageSync('jobTicketCheckCheckedList', this.shenpi_users);
		},
		// 删除审批人员
		delCheckMember(id){
			let jobTicketCheckCheckedIds = uni.getStorageSync('jobTicketCheckCheckedIds') || [];
			jobTicketCheckCheckedIds = jobTicketCheckCheckedIds.filter(item=>item != id);
			this.shenpi_users = this.shenpi_users.filter(item=>item.id != id);
			uni.setStorageSync('jobTicketCheckCheckedIds', jobTicketCheckCheckedIds);
			uni.setStorageSync('jobTicketCheckCheckedList', this.shenpi_users);
		},
		// 提交
		submit(){
			// 数据校验
			if(isNull(this.form.place)){
				return uni.showToast({icon: 'none', title: '请输入作业地点'})
			}
			if(isNull(this.others.type)){
				return uni.showToast({icon: 'none', title: '请输入作业作业方式'})
			}
			if(isNull(this.form.job_detail)){
				return uni.showToast({icon: 'none', title: '请输入作业内容'})
			}
			if(isNull(this.form.apply_sign)){
				return uni.showToast({icon: 'none', title: '请签字确认'})
			}
			let checkedWorkIds = uni.getStorageSync('jobTicketWorkCheckedIds') || [];
			let checkedCheckIds = uni.getStorageSync('jobTicketCheckCheckedIds') || [];
			let checkedSuperIds = uni.getStorageSync('jobTicketSuperCheckedIds') || [];
			if(!checkedWorkIds.length) return uni.showToast({icon: 'none', title: '请选择作业人'});
			if(!checkedCheckIds.length) return uni.showToast({icon: 'none', title: '请选择审批人'});
			if(!checkedSuperIds.length) return uni.showToast({icon: 'none', title: '请选择监督人'});
			
			// 巡检人
			let xunjian_man = this.shenpi_users.filter(item=>item.checked);
			this.form.xunjian_man = xunjian_man[0].id;
			
			// 组合数据
			this.form.work_man_info = JSON.stringify(this.work_man_info);
			this.form.shenpi_users = JSON.stringify(this.shenpi_users);
			this.form.check_content = JSON.stringify(this.check_content);
			this.form.others = JSON.stringify(this.others);
			this.form.start_time = `${this.startDate} ${this.startTime}:00`;
			this.form.over_time = `${this.overDate} ${this.overTime}:00`;
			this.form.apply_man = this.userid;
			
			// 保存数据
			uni.showLoading({title: '保存中'});
			uni.request({
				url: this.$API.jobTicketApply,
				data: this.form,
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.removeStorageSync('jobTicketCheckCheckedIds');
						uni.removeStorageSync('jobTicketCheckCheckedList');
						uni.removeStorageSync('jobTicketSuperCheckedIds');
						uni.removeStorageSync('jobTicketSuperCheckedList');
						uni.removeStorageSync('jobTicketWorkCheckedIds');
						uni.removeStorageSync('jobTicketWorkCheckedList');
						uni.redirectTo({url: 'index'});
					}else{
						uni.showToast({icon: 'none', title: '保存失败'});
					}
				},
				fail(){
					uni.hideLoading();
				}
			})
		},
		// 打开签名
		showSign(){
			this.$refs.popup.open();
			this.isShowSign = true;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					res.data = JSON.parse(res.data);
					let signUrl = res.data.fileName;
					
					// // 上传图片
					// uni.request({
					// 	method: 'POST',
					// 	url: _this.$API.gridUploadSignName,
					// 	data: {
					// 		userid: _this.userid,
					// 		url: signUrl
					// 	},
					// 	header: _this.$API.get_head(),
					// 	success: (res)=>{
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: "上传成功"
							});
							if(res.data.code == 0){
								_this.hideSign();
								_this.form.apply_sign = _this.$API.baseURL + signUrl;
							}
						// },
						// fail: function(res) {
						// 	uni.hideLoading();
						// 	uni.showToast({
						// 		title:"上传失败",
						// 		icon:'none'
						// 	});
						// }
					// })
				},
				fail: function(res) {
					uni.hideLoading();
					uni.showToast({
						title:"上传失败",
						icon:'none'
					});
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
.status_bar{
	background-color: #fff;
}
#body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	overflow-y: auto;
}

.sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.sign-image image{
	width: 100% !important;
	height: 100% !important;
}

textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
}
picker{
	width: calc(100% - 40upx);
	height: 68upx;
	line-height: 68upx;
}

/*弹窗*/
#popup{
	width: 560upx;
	height: 800upx;
	background: #fff;
	border-radius: 20upx;
}
#popup .popup-head{
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	font-size: 32upx;
}
#popup .popup-foot{
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	box-sizing: border-box;
	border-top: 2upx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
#popup .popup-foot view{
	width: 50%;
	height: 100%;
	font-size: 32upx;
	line-height: 100upx;
}
#popup .popup-foot view:last-child{
	color: #007AFF;
	box-sizing: border-box;
	border-left: 2upx solid #ddd;
}
#popup .popup-body{
	padding: 0 30upx;
	overflow-y: auto;
	box-sizing: border-box;
	height: calc(100% - 200upx);
}
#popup .popup-body .card{
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
}
#popup .popup-body .card textarea{
	height: 100upx;
	box-sizing: border-box;
}
#popup .popup-body .system{
	text-align: center;
	padding-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.people-card .people{
	padding: 0 14upx;
	margin-bottom: 20upx;
	border-radius: 10upx;
	background-color: #eee;
	position: relative;
}
.people-card .people .flex-row{
	justify-content: flex-start;
}
.people-card .people .flex-row view{
	width: 40%;
}
.people-card .people view{
	font-size: 28upx;
}
.people-card .people .pos{
	position: absolute;
	right: 20upx;
	top: 16upx;
}

.oper{
	color: #fff;
	font-size: 26upx;
	background: #007aff;
	border-radius: 10upx;
	padding: 2upx 20upx;
	display: inline-block;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	text-indent: 24upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item .label{
	width: 180upx;
	font-size: 30upx;
}
.card .item textarea{
	width: calc(100% - 180upx);
	box-sizing: border-box;
}
.card .item .input{
	width: calc(100% - 180upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 30upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btns{
	padding: 20upx 40upx 40upx 210upx;
}
.btns .btn{
	color: #fff;
	width: 200upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	text-indent: 0;
	margin-right: 20upx;
	background-color: red;
}
</style>
